<template>
	<view class="container">
		<uni-forms ref="form" :model="usage">
			<view class="header">
				<view class="user-info">领用人：<view>{{usage.usagePeople}}</view>
				</view>

				<view class="department-info">部门：<view>{{ useDate.usageDepartment }}</view>
				</view>

			</view>

			<view class="item-title">领用物品：</view>
			<view class="item">
				<view class="item-content">
					<image :src="usageData.officeImage" mode="cover"></image>
				</view>
				<view class="flex">
					<view class="name">{{usage.usageName}}</view>
					<!-- <view style=" margin: 0; padding: 0;">
						<!-- {{ item.name }} -->
					<!-- </view> -->
					<view class="stock-remaining"> 库存剩余：{{ usageData.officeQuantity }}</view>
				</view>


			</view>
			<view class="input-group">
				<view class="input-label">领用数量:</view>
				<view class="input-button">
					<button @click="decrease">-</button>
					<input v-model.number="currentValue" min="1" type="number" />
					<button @click="add">+</button>
				</view>
			</view>
			<view class="button-group">
				<button class="blue-buuton" @click="submit">提交</button>
				<view v-if="usageData.officeQuantity === 0" class="insufficient-stock">余额不足，领取不了</view>
			</view>
		</uni-forms>
	</view>
</template>

<script>
import {addUsage, getUsage} from '../../api/usage/usage.js';
import {getOffice, updateOffice} from '../../api/system/office.js';

const config = require('@/config.js')
	export default {
		data() {
			return {
				currentValue: 0,
				usageId: 0,
				usageData: {},
				useDate: {},
				usage: {

					usageName: "",
					usagePeople: this.$store.state.user.name,
					usageQuantity: "9",
					usageDate: new Date().getTime(),
					usageDepartment: "",

				}
			};
		},
		methods: {
			getOfficeParams() {
				getOffice(this.usageId).then(response => {
					console.log(response);

					this.usageData = response.data
					this.usageData.officeImage = config.baseUrl + this.usageData.officeImage
					console.log(this.usageData.officeImage);

					this.usage.usageName = response.data.officeName
					// this.usageData.forEach(item => item.officeImage = config.baseUrl + item.officeImage)
				})

				getUsage(this.usageId).then(response => {

					console.log(response);

					this.useDate = response.data;


				})

			},
			getUsageParams() {
				getUsage(this.usageId).then(response => {
					console.log(response.data);

					this.useDate = response.data;
					this.usageDepartment = this.useDate.usageDepartment; // 设置 usageDepartment 值


				});
			},


			updateOfficeList() {
				this.usageData.officeImage = this.usageData.officeImage.substring(24)
				updateOffice(this.usageData).then(response => {

					this.getOfficeParams();
				});
			},
			submit() {
				if (this.usageData.officeQuantity >= this.currentValue) {
					// 如果库存足够，继续执行提交
					const usage = {
						...this.usage,
						usageQuantity: this.currentValue,
						usageDepartment: this.useDate.usageDepartment
					};

					this.$refs.form.validate().then(res => {
						addUsage(usage).then(response => {
							this.$modal.msgSuccess("领用成功");

							// 成功提交后，更新本地的库存数量
							this.usageData.officeQuantity -= this.currentValue;

							// 更新服务器上的库存
							this.updateOfficeList();

							// 清除当前领用数量
							this.currentValue = 0;
						});
					});
				} else {
					// 如果库存不足，显示提示信息
					uni.showToast({
						title: '库存不足，无法领取',
						icon: 'none',
						duration: 2000
					});
				}

			},
			add() {
				this.currentValue++;

			},
			decrease() {
				if (this.currentValue > 0 && this.currentValue <= this.usageData.officeQuantity) {
					this.currentValue--;
				}
			},


		},
		onLoad(option) {
			this.usageId = option.id
		},
		created() {
			this.getOfficeParams();
			this.getUsageParams();
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #f5f6f7;
	}

	.container {
		// background-color: lawngreen;

		.header {
			padding: 20px 25px;


			.user-info {
				font-weight: 900;
				padding-bottom: 20rpx;

				view {
					font-weight: 100;
					display: inline-block;
				}
			}

			.department-info {
				font-weight: 900;
				padding-left: 30rpx;

				view {
					font-weight: 100;
					display: inline-block;
				}
			}
		}

		.item-title {
			padding-left: 20rpx;
			font-weight: 900;
		}

		.item {
			background-color: white;
			display: flex;
			margin: 15rpx;
			border-radius: 6%;
			border: rgb(209, 209, 209) 1px solid;
			box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);

			.item-content {
				margin: 20rpx;
				width: 250rpx;
				height: 250rpx;

				image {
					width: 250rpx;
					height: 250rpx;
					background-size: cover;
				}
			}

			.flex {
				padding-right: 20rpx;
				margin-top: 20rpx;
				width: 350rpx;
				height: 250rpx;
				flex-direction: column;

				.name {
					height: 200rpx;
					font-weight: 900;
					font-size: 15px;
					line-height: 1.2;
				}

				.stock-remaining {
					height: 50rpx;
					line-height: 50rpx;
				}
			}
		}

		.input-group {
			display: flex;
			justify-content: space-between;
			margin-top: 20px;
			padding: 0 30rpx;
			// background-color: saddlebrown;

			.input-label {
				// background-color: salmon;
				font-weight: 900;
				line-height: 50rpx;

			}

			.input-button {
				display: flex;
				// background-color: palegoldenrod;

				button {
					width: 70rpx;
					height: 50rpx;
					background-color: white;
					color: black;
					border-radius: 4px;
					font-size: 16px;
					text-align: center;
					line-height: 50rpx;
				}

				input {
					width: 100rpx;
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 4px;
					padding: 0 10px;
					text-align: center;
					// background-color: white;
					color: black;
				}
			}
		}

		.button-group {
			display: flex;
			justify-content: center;
			margin-top: 240px;

			button {
				width: 50%;
				height: 40px;
				background-color: rgb(22, 155, 213);
				color: white;
				border-radius: 4px;
				font-size: 16px;
				text-align: center;
				line-height: 40px;
			}
		}
	}
</style>